<template>
    <div class="main-box" v-loading="loading">
		<div class="dl-row mar-bottom-20">
			<div class="search-box" style="margin-right: 20px">
				<el-input
						placeholder="请输入试题关键字"
						prefix-icon="el-icon-search"
						clearable
						@clear="init()"
						v-model="inputSearch">
				</el-input>
			</div>
			<el-button type="success" round size="small" @click="init()">搜索</el-button>
		</div>
		<div v-if="data.length>0">
			<div class="border-main mar-bottom-20 sb-main-box sb-error" v-for="(question,index) in data" :key="index">
				<div class="dl-row-sb mar-bottom-15">
				  <div class="dl-row center answer">
					<h2>{{index+1}}、{{question.questionDesc}}</h2>
				  </div>
				</div>
				<el-collapse accordion class="mar-bottom-15 right-answer">
					<el-collapse-item name="1">
						<template slot="title">
							<div class="dl-row center answer">
								<span class="topic-tag">{{getOptionType(question.optionType)}}</span>
								<div class="dl-row center">
									<h1>正确答案：</h1>
								</div>
							</div>
						</template>
						<div v-for="(right,rightIndex) in getRight(question.optList)" :key="rightIndex">
							<div class="answer dl-row">
								<span class="face"></span><p>{{right.answerDesc}}</p>
							</div>
<!--							<el-checkbox v-model="rightChecked" disabled>{{right.answerDesc}}</el-checkbox>-->
						</div>
					</el-collapse-item>
				</el-collapse>
				<ul class="option">
					<li class="dl-row start" v-for="(option,optionIndex) in question.optList"
						:key="optionIndex">
						<span :class="setQuestionCls(question,option)"></span>
						<p>{{option.answerDesc}}</p>
					</li>
				</ul>
			</div>
			<el-pagination
					:total="total"
					:current-page="page + 1"
					style="margin-top: 8px;"
					layout="total, prev, pager, next, sizes"
					@size-change="sizeChange"
					@current-change="pageChange"/>
				
		</div>					
		<div v-if="data.length==0 && !loading">
			<el-empty description="无错题" class="emptyClass" :image-size="250" :image="require('../../../assets/no_data_images/no_error-question.png')"></el-empty>
		</div>
    </div>
</template>

<script>
    import initData from '@/mixins/initData'
    import {cancelCollect} from '@/api/collect'

    export default {
        name: "collect",
        mixins: [initData],
        data() {
            return {
                inputSearch: '',
                rightChecked: true,
				loading:false
            }
        },
        methods: {
            getRight(optionList) {
                return optionList.filter(item => item.isTrue === 1)
            },
            getOptionType(optionType) {
                switch (optionType) {
                    case 0:
                        return '单选题';
                    case 1:
                        return '多选题';
                    case 2:
                        return '判断题';
                }
            },
            beforeInit() {
                this.url = 'check/user-answer/err-page-list'
                this.params = {page: this.page, size: this.size, questionName: this.inputSearch}
                return true
            },
            getRightIds(optionList) {
                return optionList.filter(item => item.isTrue === 1).map(item => item.id)
            },
            setQuestionCls(question, option) {
                let right = this.getRightIds(question.optList);
                if (question.checked === option.id) {
                    return 'error'
                } else if (right.indexOf(option.id) !== -1) {
                    return 'face'
                }
                return ''
            }
        }
    }
</script>

<style scoped>

</style>
